<template>
	<view v-if="wallpaper.length>0">
		<!-- 专辑背景 -->
		<view class="album-bg">
			<image :src="album.cover"></image>
			<view class="album_info">
				<view class="album_left">{{album.name}}</view>
				<view class="album_right">关注专辑</view>
			</view>
		</view>
		<!-- 专辑描述 -->
		<view class="album_desc">
			<view class="album_desc_header">
				<image mode="withFix" :src="album.user.avatar"></image>
				<view class="name">{{album.user.name}}</view>
			</view>
			<view class="album_desc_info">
				<text>
					{{album.desc}}
				</text>
			</view>
		</view>
		<!-- 图片列表 -->
		<view class="album_list">
			<view class="album_item" v-for="(item,i) in wallpaper" :key="i">
				<go-detail :list="wallpaper" :index="i">
				<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFix"></image>
				</go-detail>
			</view>
		</view>
	</view>
</template>

<script>
	//引入goDetail 组件
	import goDetail from '@/components/goDetail.vue';
	export default {
		components: {
			goDetail
		},
		data() {
			return {
				params: {
					limit: 30,
					order: 'new',
					skip: 0,
					first: 1   //1 返回所以  0返回需要的数据
				},
				id: null,
				wallpaper: [],
				album: {
					
				},
				hasMore: true
				
			}
		},
		onLoad(options) {
			
			this.id = options.id  
			// this.id = "5d5f8e45e7bce75ae7fb8278"
			this.getDataList()
		},
		onReachBottom() {
			// 加载更多  uni-app自带的 触底函数
			if(this.hasMore){
				this.params.first = 0
				this.params.skip += this.params.limit
				this.getDataList()
			}else {
				
			}
				
		},
		methods: {
			async getDataList(){
				const res = await this.request({
					url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
					data: this.params
				})
				
				if(Object.keys(this.album).length === 0){
					this.album = res.data.res.album;
				}
				if(res.data.res.wallpaper.length === 0){
					this.hasMore = false
					uni.showToast({
						title: '没有更多数据了',
						icon: "none"
					})
					return
				}
				this.wallpaper = [...this.wallpaper,...res.data.res.wallpaper]
				
			}
		}
	}
</script>

<style lang="scss" scoped>
 .album-bg {
	 position: relative;
	 image {
		 
	 }
	 .album_info {
		 position: absolute;
		 width: 100%;
		 left: 0;
		 bottom: 0;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 height: 80rpx;
         padding-left: 15rpx;
		 
		 .album_left {
			 font-size: 40rpx;
			 color: #FFFFFF;
		 }
		 .album_right {
			 color: #FFFFFF;
			 background-color: #f92672;
			 width: 130rpx;
			 height: 50rpx;
			 font-size: 24rpx;
			 border-radius: 10rpx;
			 line-height: 50rpx;
			 text-align: center;
			 margin:0 36rpx;
		 }
	 }
 }
 .album_desc {
	 padding: 0 15rpx;
	 .album_desc_header {
		 display: flex;
		 align-items: center;
		 padding: 15rpx 0;
		 image {
			 width: 80rpx;
			 height: 80rpx;
			 border-radius: 50%;
		 }
		 view {
			 padding: 0 20rpx;
			 color: #000000;
			 font-size: 28rpx;
		 }
	 }
 }
 .album_list {
	 display: flex;
	 flex-wrap: wrap;
	 .album_item {
		 width: 32.7%;
		 border: 3rpx solid #FFFFFF;
		 image {
			 height: 160rpx;
		 }
	 }
 }
</style>
